<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>云音箱管理系统 登陆页面</title>
		<script src="../static/js/jquery-1.8.3.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css">
		<script type="text/javascript">
			$(document).ready(function() {
				$("#password").keyup(function(){
					$("#error").hide();
				});
				$("#login").click(function() {
					//第一步：取数据,这里用到了用户名和密码
					var username = $("#username").val();
					var password = $("#password").val();
					//第二步：验证数据，这里需要从数据库调数据，我们就用到了ajax
					$.ajax({
						url: "/userShiro/login", //请求地址
						data: {
							username: username,
							password: password
						}, //提交的数据
						type: "POST", //提交的方式
						dataType: "text", //返回类型 TEXT字符串 JSON XML
						"success": function(result) {
							$("#error").hide();
							window.location.href="/userShiro/index";
						},
						"error": function() {
							$("#error").show();
						}
					})
				})
			});
		</script>
	</head>

	<body>
		<div class="loginbox">
			<div class="loginnav">
				<nav class="navbar navbar-default">
					<div class="container">
						<div class="navbar-header">
							<a class="navbar-brand" href="javascript:void(0)"></a>
							<span class="logintitle">管理员登录</span>
						</div>
					</div>
				</nav>
			</div>
			<section class="mainlogin">
				<h4>管理员登录</h4>
				<div class="signinpanel ">
					<div class="row">
						<div class="col-sm-4">
							<div class="signin-info"></div>
						</div>
						<div class="col-sm-5">
							<form id="loginForm" autocomplete="off">
								<h4 class="no-margins">用户登陆</h4>
								<input id="username" name="username" type="text" class="form-control uname" datatype="*" placeholder="用户名" nullmsg="用户名不能为空" />
								<input id="password" type="password" class="form-control pword m-b" placeholder="密码" datatype="*6-18" nullmsg="密码不能为空" />
								<span>
					                    <input type="checkbox" name="remember" value="remember" checked="checked">
					                    <label for="remember">记住密码</label>
					                    <p id="error" style="font-size: large;color: red;font-family: 'Times New Roman';display: none">账号或密码出错请重新登陆！</p>
					                </span>
								<button type="button" class="btn btn-info btn-block" id="login">登录</button>
								<div class="col-md-12" style="margin-top: 5px"></div>
							</form>
						</div>
					</div>
				</div>
			</section>
		</div>
	</body>

</html>